 /*
 * @description: 装修首页/选择版本
 * @Author: along
 * @Date: 2020-06-11
 * @Last Modified by: along
 * @Last Modified time: 2020-06-11
 */
<template>
    <el-dialog
        title="选择版本"
        :visible.sync="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
        class="__create"
    >
        <div class="__wrap">
            <div class="__items">
                <p class="__items_title">
                    选择版本：
                </p>
                <el-select
                    v-model="version"
                    clearable
                    filterable
                    placeholder="请选择"
                    size="small"
                    :style="{width: '300px'}"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in versionlist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
        </div>
        <div class="__create_footer">
            <el-button
                @click="dialogVisible = false"
                type="default"
                size="medium"
                :style="{width: '120px', marginRight: '32px'}"
            >
                取 消
            </el-button>
            <el-button
                type="primary"
                size="medium"
                :style="{width: '120px'}"
                @click="handleConfirm()"
                :disabled="!version"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'ActiveChangeVersion',
    data() {
        return {
            page_no: '',
            dialogVisible: false,
            version: '',
            versionlist: []
        };
    },
    methods: {
        // 显示弹窗
        showDialog (row) {
            this.page_no = row.page_no;
            // this.version = row.version;
            this.dialogVisible = true;
            this.getVersionList().then(vList => {
                this.versionlist = vList;
            });
        },

        // 关闭弹窗
        closeDialog () {
            this.dialogVisible = false;
        },

        // 获取版本列表
        getVersionList () {
            return new Promise((resolve,reject) => {
                this.$post('',{
                    //
                },resp=>{
                    if (resp.code == 1) {
                        resolve(resp.data.list);
                    } else if (resp.code == 0) {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            type: 'warning',
                            duration: 2000
                        });
                    }
                });
            });
        },

        // 确定创建
        handleConfirm () {
            this.closeDialog();
            this.$emit('change', {
                version: this.version,
                page_no: this.page_no
            });
        }
    },
};
</script>

<style lang="less">
.__create {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 60px;
        padding-right: 60px;
    }
    .__create_footer {
        display: flex;
        justify-content: center;
    }
    .__wrap {
        display: flex;
        flex-direction: column;
        .__items {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
            .__items_title {
                white-space: nowrap;
            }
        }
    }
}
</style>